<template>
	<view class="zhuan_view">
		<view class="c_tit">
			Lucky-Wheel
		</view>
		<view class="c_name">
			<!-- 当前抽奖用户名 -->
			{{userInfo.name}}
		</view>
		<view class="zhuanp_box">
			<image src="../../static/zhuan1.png" class="zhuan1_img" :style="{transform:'rotate('+degNum+'deg)'}"></image>
			<image src="../../static/zhuan2.png" class="zhuan2_img"></image>
		</view>
		<view class="c_btn" @click="zhuanBtn">
			开始抽奖
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				degNum:0,
				userInfo:{},
				jiangArr:[
					{
						num:1,text:1000,
					},
					{
						num:2,text:2000,
					},
					{
						num:3,text:3000,
					},
					{
						num:4,text:4000,
					},
					{
						num:5,text:5000,
					},
					{
						num:6,text:6000,
					},
					{
						num:7,text:7000,
					},
					{
						num:8,text:8000,
					},
				],
				zhong:""
			};
		},
		mounted() {
			// this.luckyDraw()
			
		},
		onLoad(ph) {
			console.log(JSON.parse(ph.item))
			if(ph.item){
				this.userInfo = JSON.parse(ph.item).data;
			}
			
		},
		methods:{
			zhuanBtn(){
				// this.degNum = 360
				// this.luckyDraw(5)
				this.$getApi("/blog/Index/choujiang", {userid:this.userInfo.id}, res => {
					console.log(res, "优惠券")
					let zhong = res.data.jiangpin;
					this.zhong = zhong;
					let thisIndex = this.jiangArr.findIndex(item=>{
						return item.text == zhong
					})
					console.log(thisIndex)
					this.luckyDraw(thisIndex)
				})
			},
			luckyDraw(nKey) {
				// 旋转几圈
			    let  turnNum = 2 * 360 ;
				let jiaodu = ( 360 / 8 ) * nKey;
				this.degNum = turnNum - 110 + jiaodu;
				
				setTimeout(()=>{
					uni.navigateTo({
						url:"/pages/index/fenxiang?money="+this.zhong
					})
				},4000)
			}


		}
	}
</script>

<style lang="scss">
.zhuan_view{
	background: url(../../static/zhuanbg.png) repeat center center;
	background-size: 100% 100%;
	height: 100vh;
	width: 750rpx;
	.c_tit{
		text-align: center;
		font-weight: bold;
		font-size: 44rpx;
		padding: 40rpx 0 30rpx;
	}
	.c_name{
		text-align: center;
		font-size: 30rpx;
		margin: 0 auto 40rpx;
		padding: 6rpx 0;
		width: 300rpx;
		background-color: #fff;
		border-radius: 40rpx;
	}
	.c_btn{
		width: 660rpx;
		color: #fff;
		background-color: #d4b25b;
		margin: 70rpx auto 0;
		text-align: center;
		border-radius: 60rpx;
		padding: 20rpx 0;
	}
	.zhuanp_box{
		width: 660rpx;
		height: 660rpx;
		margin: 0 auto;
		position: relative;
		.zhuan1_img{
			width: 660rpx;
			height: 660rpx;
			position: absolute;
			top: 0;
			left: 0;
			
			transition:all 3s ease-in-out;
		}
		.zhuan2_img{
			width: 100rpx;
			height: 120rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left:-50rpx ;
			margin-top: -70rpx;
		}
	}
}
</style>
